<template>
  <div id="app">
    <div id="appBack" v-if="showAppLoading"></div>
    <div id="loadingDiv" v-if="showAppLoading">
      <div id="appLoading">
        <div class="spinner-container container1">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
      </div>
      <span id="appSpan">加载中，请稍后...</span>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import cookie from 'js-cookie'
  import {mapGetters} from 'vuex'
export default {
  name: 'app',
  data() {
    return{
    }
  },
  computed: {
    ...mapGetters([
      'showAppLoading',
      'showErr',
    ])
  },
  watch: {
    showErr(val) {
      this.$Modal.error({
        title: '提示',
        content: this.showErr
      });
    }
  },
  created() {
    // document.oncontextmenu = function(){
    //   return false;
    // }
    // 禁止左键拖动事件，但是会和富文本框冲突，所以选择禁止复制事件
    // document.onselectstart = function(){
    //   event.returnValue = false;
    // }
    document.oncopy = function(){
      event.returnValue = false;
    }
    cookie.get('showAppLoading', 1)
  }
}
</script>
<style lang="less">
  .colorGreen{ //5分
    color: #56b44a;
  }
  .colorYellow{ //4分
    color: #f2ca51;
  }
  .colorRed{ // 0~3分
    color: #f15c60;
  }
  .colorBlue{ //蓝色
    color: #3f8fe0;
  }
  .colorOrange{ //橙色
    color: #ffb11b;
  }
  .colorGray{ //灰色
    color: #cccccc !important;
  }
  .bgGreen{ //5分
    background: #56b44a;
  }
  .bgYellow{ //4分
    background: #f2ca51;
  }
  .bgRed{ // 0~3分
    background: #f15c60;
  }
  .bgBlue{ //蓝色
    background: #3f8fe0;
  }
  .bgOrange{ //橙色
    background: #ffb11b;
  }
  .bgGray{ //灰色
    background: #cccccc !important;;
  }
  .gradualGreen{ //渐变绿色 5分
    background: linear-gradient(to right, #5fba53 , #76d033);
  }
  .gradualYellow{ //渐变黄色 5分
    background: linear-gradient(to right, #ffb11b , #ffca4e);
  }
  .gradualRed{ //渐变红色 0~3分
    background: linear-gradient(to right, #f15c60 , #fd7862);
  }
  #appBack{
    width: 100%;
    height: 100%;
    background: #515a6e;
    opacity: .3;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
  }
  #loadingDiv{
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    #appLoading{
      width: 40px;
      height: 40px;
      text-align: center;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      .spinner-container{
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .container1 > div, .container2 > div, .container3 > div{
        width: 6px;
        height: 6px;
        background-color: #3e88d4;
        border-radius: 100%;
        position: absolute;
        -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
        animation: bouncedelay 1.2s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
      .container2 {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
      }
      .container3 {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
      }
      .circle1 { top: 0; left: 0; }
      .circle2 { top: 0; right: 0; }
      .circle3 { right: 0; bottom: 0; }
      .circle4 { left: 0; bottom: 0; }
      .container2 .circle1 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
      .container3 .circle1 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
      }
      .container1 .circle2 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
      .container2 .circle2 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }
      .container3 .circle2 {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
      }
      .container1 .circle3 {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
      }
      .container2 .circle3 {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
      }
      .container3 .circle3 {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
      }
      .container1 .circle4 {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
      }
      .container2 .circle4 {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
      }
      .container3 .circle4 {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
      }
      @-webkit-keyframes bouncedelay {
        0%, 80%, 100% { -webkit-transform: scale(0.0) }
        40% { -webkit-transform: scale(1.0) }
      }
      @keyframes bouncedelay {
        0%, 80%, 100% {
          transform: scale(0.0);
          -webkit-transform: scale(0.0);
        } 40% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
          }
      }
    }
    #appSpan{
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: #fff;
      margin-top: 15px;
    }
  }
</style>
